<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size: 9pt;
	}
	
	#panel{
		width:600px;
		height:300px;
		border:1px solid #999;
		position:relative;
	}
	
	#panel #image_view{
		left: 236px;
		top: 80px;
		width:128px;
		height:128px;
		border:1px solid #999;
		position: relative;
		overflow: hidden;
	}
	
	#nav{
		text-align: center;
		width: 600px;
	}
</style>
<script>
	var viewer,imageScrollHeight,currentY,timerId,step;
	
	var init=function(){
		viewer = document.getElementById("image_view");
		imageScrollHeight = viewer.scrollHeight - viewer.offsetHeight;
		step = 2;
		timerId = 0;
		currentY = 0;
	}
	
	var start = function(){
		if(timerId===0)
			timerId = setInterval(move,20);
	}
	
	var move = function(){
		currentY += step;
		if(currentY >  imageScrollHeight){
			currentY = imageScrollHeight;
			step = -2;
		}
		
		if(currentY < 0){
			currentY = 0;
			step = 2;
		}
		
		viewer.scrollTop = currentY;
	}
	
	var stop = function(){
		if(timerId !==0){
			clearInterval(timerId);
			timerId=0;
		}
	}
	window.onload=function(e){
		var startBtn = document.getElementById("btn_start");
		startBtn.onclick=function(e){
			init();
			start();
		}
		
		var stopBtn  = document.getElementById("btn_stop");
		stopBtn.onclick=function(e){
			stop();
		}
	}
</script>

</head>
<body>
	<div> 
		<h4>#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.</h4>
		<div id="panel">
			<div id="image_view">	
				<img src="../images/img1.jpg">
				<img src="../images/img2.jpg">
				<img src="../images/img3.jpg">
				<img src="../images/img4.jpg">
				<img src="../images/img5.jpg">
				<img src="../images/img6.jpg">
				<img src="../images/img7.jpg">
				<img src="../images/img8.jpg">
				<img src="../images/img9.jpg">
			</div>
		</div>
		<div id="nav">
			<button id="btn_start">시작</button>
			<button id="btn_stop">멈춤</button>
		</div>
	</div>     
</body>
</html>